// import React from 'react';
import { Document, Page, Text, View, Link, StyleSheet, Font } from '@react-pdf/renderer';
import { PDFViewer } from '@react-pdf/renderer';

// 加载思源黑体（通过公开CDN或本地字体包）
// 方案1：使用公开CDN（需联网）
// Font.register({
//   family: 'Source Han Sans',
//   src: 'https://cdn.jsdelivr.net/npm/source-han-sans-cn@2.004/OTF/SimplifiedChinese/SourceHanSansCN-Regular.otf',
// });

// 方案2：使用npm包（推荐，无需联网）
// 先安装：npm install source-han-sans-cn
import sourceHanSans from 'source-han-sans-cn/SourceHanSansCN-Regular.otf';
Font.register({
  family: 'Source Han Sans',
  src: sourceHanSans,
});

// 定义PDF样式
const styles = StyleSheet.create({
  page: {
    padding: 50,
    fontFamily: 'Source Han Sans', // 应用注册的字体
  },
  header: {
    textAlign: 'center',
    marginBottom: 30,
  },
  name: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  title: {
    fontSize: 16,
    color: '#666',
    marginBottom: 10,
  },
  contact: {
    fontSize: 10,
    color: '#333',
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    borderBottom: '1px solid #333',
    marginBottom: 10,
    paddingBottom: 3,
  },
  entry: {
    marginBottom: 10,
  },
  entryHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  entryTitle: {
    fontSize: 12,
    fontWeight: 'bold',
  },
  entryDate: {
    fontSize: 10,
    color: '#666',
  },
  entrySubtitle: {
    fontSize: 11,
    color: '#333',
    marginBottom: 5,
  },
  description: {
    fontSize: 10,
    lineHeight: 1.5,
  },
  skillsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  skillTag: {
    backgroundColor: '#f0f0f0',
    padding: '2px 6px',
    borderRadius: 3,
    fontSize: 10,
  },
});

// 简历PDF文档组件
const ResumeDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      {/* 个人信息头部 */}
      <View style={styles.header}>
        <Text style={styles.name}>张明</Text>
        <Text style={styles.title}>前端开发工程师</Text>
        <Text style={styles.contact}>
          电话: 138-xxxx-xxxx | 邮箱: zhangming@example.com | 
          <Link src="https://github.com/zhangming" style={{ textDecoration: 'underline' }}>
            GitHub: github.com/zhangming
          </Link>
        </Text>
      </View>

      {/* 个人简介 */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>个人简介</Text>
        <Text style={styles.description}>
          5年前端开发经验，精通React、Vue等现代前端框架，擅长构建高性能、可扩展的Web应用。
          具有良好的代码规范和团队协作能力，热衷于学习新技术并应用于实际项目中。
        </Text>
      </View>

      {/* 工作经历 */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>工作经历</Text>
        
        <View style={styles.entry}>
          <View style={styles.entryHeader}>
            <Text style={styles.entryTitle}>ABC科技有限公司</Text>
            <Text style={styles.entryDate}>2020.03 - 至今</Text>
          </View>
          <Text style={styles.entrySubtitle}>高级前端开发工程师</Text>
          <Text style={styles.description}>
            负责公司核心产品的前端架构设计与开发，优化前端性能，提升用户体验。
            主导使用React重构老旧项目，页面加载速度提升60%，用户留存率提升15%。
            制定前端开发规范，指导初级开发工程师，提高团队开发效率。
          </Text>
        </View>
        
        <View style={styles.entry}>
          <View style={styles.entryHeader}>
            <Text style={styles.entryTitle}>XYZ互联网公司</Text>
            <Text style={styles.entryDate}>2018.07 - 2020.02</Text>
          </View>
          <Text style={styles.entrySubtitle}>前端开发工程师</Text>
          <Text style={styles.description}>
            参与电商平台前端开发，负责商品详情页、购物车等核心模块的实现。
            开发多个可复用组件，减少代码冗余，提高开发效率30%。
            与UI/UX团队紧密合作，确保设计稿的精准实现。
          </Text>
        </View>
      </View>

      {/* 教育背景 */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>教育背景</Text>
        <View style={styles.entry}>
          <View style={styles.entryHeader}>
            <Text style={styles.entryTitle}>某大学 计算机科学与技术专业</Text>
            <Text style={styles.entryDate}>2014.09 - 2018.06</Text>
          </View>
          <Text style={styles.entrySubtitle}>本科 / 学士学位</Text>
        </View>
      </View>

      {/* 技能 */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>技能</Text>
        <View style={styles.skillsContainer}>
          <Text style={styles.skillTag}>React</Text>
          <Text style={styles.skillTag}>Vue</Text>
          <Text style={styles.skillTag}>JavaScript/TypeScript</Text>
          <Text style={styles.skillTag}>HTML5/CSS3</Text>
          <Text style={styles.skillTag}>Webpack/Vite</Text>
          <Text style={styles.skillTag}>Redux/Zustand</Text>
          <Text style={styles.skillTag}>React Router</Text>
          <Text style={styles.skillTag}>Ant Design/MUI</Text>
        </View>
      </View>
    </Page>
  </Document>
);

// 简历展示组件
const Resume = () => {
  return (
    <div style={{ width: '100%', height: '100vh', padding: '20px' }}>
      <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>个人简历</h2>
      <PDFViewer style={{ width: '100%', height: '80%', border: '1px solid #e0e0e0' }}>
        <ResumeDocument />
      </PDFViewer>
    </div>
  );
};

export default Resume;
    